<template>
  <div class="wrap">
    <template>
      <fill-header :step="2"/>
    </template>
    <div class="fill-wrap">
      <div class="fill-main flex flex-justify-around">
        <div class="fill-left">
          <div class="fill-content">
            <div class="title">
              <h2 class="blue">{{ $t('fillHeader.contactInfo') }}</h2>
              <p>{{ $t('contact.tips') }}</p>
            </div>
            <div class="border-bottom"/>
            <div class="progress">
              <div class="bar">
                <el-progress 
                  :percentage="40" 
                  :show-text="false" 
                  color="#8e71c7"/>
              </div>
              <span>40%</span>
            </div>
            <div class="contact">
              <div class="form-wrap">
                <div class="item">
                  <el-form 
                    ref="form" 
                    :model="form" 
                    :rules="rules" 
                    :show-message="false" 
                    label-position="top">
                    <div class="title blue font-20 bold border-bottom">{{ $t('fillHeader.contactInfo')+1 }}</div>
                    <el-form-item :label="$t('contact.relationship')">
                      <el-select 
                        v-model="form.contactOneRelation" 
                        prop="contactOneRelation">
                        <el-option
                          v-for="item in relationOneList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                    <el-form-item 
                      :label="$t('contact.name')" 
                      prop="contactOneName">
                      <el-input 
                        v-model="form.contactOneName" 
                        :maxlength="50" 
                        type="text"/>
                    </el-form-item>
                    <el-form-item 
                      :label="$t('contact.phone')" 
                      prop="contactOnePhone">
                      <el-input 
                        v-model="form.contactOnePhone" 
                        :maxlength="15" 
                        type="tel"/>
                    </el-form-item>
                    <div class="title blue font-20 bold border-bottom">{{ $t('fillHeader.contactInfo')+2 }}</div>
                    <el-form-item :label="$t('contact.relationship')">
                      <el-select 
                        v-model="form.contactTwoRelation" 
                        prop="contactTwoRelation">
                        <el-option
                          v-for="item in relationSecondList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                    <el-form-item 
                      :label="$t('contact.name')" 
                      prop="contactTwoName">
                      <el-input 
                        v-model="form.contactTwoName" 
                        :maxlength="50" 
                        type="text"/>
                    </el-form-item>
                    <el-form-item 
                      :label="$t('contact.phone')" 
                      prop="contactTwoPhone">
                      <el-input 
                        v-model="form.contactTwoPhone" 
                        :maxlength="15" 
                        type="tel"/>
                    </el-form-item>
                    <div class="title blue font-20 bold border-bottom">{{ $t('fillHeader.contactInfo')+3 }}</div>
                    <el-form-item :label="$t('contact.relationship')">
                      <el-select 
                        v-model="form.contactThreeRelation" 
                        prop="contactThreeRelation">
                        <el-option
                          v-for="item in relationThreeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"/>
                      </el-select>
                    </el-form-item>
                    <el-form-item 
                      :label="$t('contact.name')" 
                      prop="contactThreeName">
                      <el-input 
                        v-model="form.contactThreeName" 
                        :maxlength="50" 
                        type="text"/>
                    </el-form-item>
                    <el-form-item 
                      :label="$t('contact.phone')" 
                      prop="contactThreePhone">
                      <el-input 
                        v-model="form.contactThreePhone" 
                        :maxlength="15" 
                        type="text"/>
                    </el-form-item>
                    <!-- <div class="full-width flex flex-justify-center padding">
                      <el-button type="primary" round @click="submit">{{$t('login.goOn')}}</el-button>
                    </div> -->
                  </el-form>
                  <div class="full-width flex flex-justify-center padding">
                    <el-button 
                      :disabled="!nextEnabled" 
                      type="primary" 
                      round 
                      @click="save">{{ $t('login.goOn') }}</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="fill-right">
          <fill-right/>
        </div>
      </div>
    </div>
    
    <template>
      <sjx_Footer/>
    </template>
  </div>
</template>
<script>
import base from '../../common/fn.js'
import fillHeader from '../../components/fill-header'
import fillRight from '../../components/fill-right'
import sjx_Footer from '../../components/footer'
export default {
  components: {
    fillHeader,
    sjx_Footer,
    fillRight
  },
  data() {
    const isNum = (rule, value, callBack) => {
      let reg = /^\+?[1-9][0-9]*$/
      if (value === '') {
        callBack(new Error(''))
      }
    }
    return {
      form: {
        contactOneRelation: '',
        contactOneName: '',
        contactOnePhone: '',
        contactTwoRelation: '',
        contactTwoName: '',
        contactTwoPhone: '',
        contactThreeRelation: '',
        contactThreeName: '',
        contactThreePhone: ''
      },
      rules: {
        contactOneRelation: [{ required: true, trigger: 'change' }],
        contactOneName: [{ required: true, trigger: 'blur' }],
        contactOnePhone: [{ required: true, trigger: 'blur' }],
        contactTwoRelation: [{ required: true, trigger: 'change' }],
        contactTwoName: [{ required: true, trigger: 'blur' }],
        contactTwoPhone: [{ required: true, trigger: 'blur' }],
        contactThreeRelation: [{ required: true, trigger: 'change' }],
        contactThreeName: [{ required: true, trigger: 'blur' }],
        contactThreePhone: [{ required: true, trigger: 'blur' }]
      },
      relationOneList: [],
      relationSecondList: [],
      relationThreeList: [],
      nextEnabled: true
    }
  },
  mounted() {
    const self = this
    this.fetchRelation()
  },
  methods: {
    fetchRelation() {
      let option = {
        header: {
          ...base,
          action: 'DICT0002'
        },
        optionGroup: 'relation'
      }
      this.$axios.$post('', option).then(res => {
        if (res.header.code == 0) {
          let data = res.data
          let arr = []
          data.forEach((item, i) => {
            arr.push({ label: item.optionName, value: item.optionValue })
          })
          this.relationOneList = arr.slice(0, 3)
          this.relationSecondList = arr.slice(3, 6)
          this.relationThreeList = arr.slice(6)
        }
      })
    },
    save() {
      const self = this

      this.$refs['form'].validate(valid => {
        if (valid) {
          if (
            self.form.contactOnePhone === self.form.contactTwoPhone ||
            self.form.contactOnePhone === self.form.contactThreePhone ||
            self.form.contactThreePhone === self.form.contactTwoPhone
          ) {
            self.$message.error(this.$t('contact.error'))
            return
          }
          let option = {
            header: {
              ...base,
              action: 'U0005',
              sessionid: this.$store.state.sessionid
            },
            ...self.form
          }
          self.$axios.$post('', option).then(res => {
            if (res.header.code == 0 && res.data == 1) {
              self.nextEnabled = false
              self.$router.push('/job')
            } else {
              self.$message.error(res.header.msg)
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style>
.el-progress-bar__inner {
  background-color: #3462ff !important;
}
.el-progress-bar__outer {
  height: 9px !important;
}
.el-form--label-top .el-form-item__label {
  display: inline-block;
  text-align: left;
  padding: 0;
}
.el-select {
  width: 100%;
}
.el-button {
  background: #3462ff;
}
.el-button span {
  color: #fff !important;
  font-size: 16px;
}
</style>

<style lang="scss" scoped>
.fill-wrap {
  background: #f7f7f7;
  padding: 20px;
  .fill-main {
    width: 1200px;
    margin: 0 auto;
    .fill-left {
      background: #fff;
      width: 800px;
      .fill-content {
        padding: 15px;
        .border-bottom {
          width: 500px;
        }
        .title {
          width: 100%;
          padding: 10px;
          h2 {
            font-size: 29px;
            font-weight: 700;
            line-height: 50px;
          }
          p {
            font-size: 16px;
            line-height: 30px;
            width: 720px;
            margin-bottom: 10px;
          }
        }
        .progress {
          width: 500px;
          position: relative;
          .bar {
            padding-top: 30px;
          }
          span {
            position: absolute;
            left: 38%;
            color: #3462ff;
          }
        }
        .contact {
          padding: 20px;
          .form-wrap {
            width: 500px;
            .el-button {
              width: 140px;
              height: 50px;
              border-radius: 25px;
              box-shadow: 2px 0px 13px rgba(48, 77, 220, 0.45);
            }
            .form {
              padding: 20px;
            }
          }
        }
      }
    }
    .fill-right {
      background: #fff;
      width: 317px;
      height: 416px;
    }
  }
}
</style>
